<template>
  <div id="app">
    <div class="top">
      <div class="distribution">
        <span>我的频道</span>
        <van-button
          plain
          color="red"
          size="small"
          @click="iconShow = !iconShow"
          >{{ iconShow ? '取消' : '编辑' }}</van-button
        >
      </div>
      <van-grid :column-num="3" gutter="10">
        <van-grid-item
          class="pad"
          v-for="(item, index) in editChannel"
          :key="item.id"
          @click="intoChannel(index)"
        >
          <span :class="{ col: index == value }">{{ item.name }}</span>
          <van-icon
            class="delIcon"
            name="cross"
            v-if="iconShow && index"
            @click="editChannels(index, item)"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="bottom">
      <div class="distribution">
        可选频道
      </div>
      <van-grid :column-num="4" :gutter="8">
        <van-grid-item
          class="pad"
          v-for="value in selectChannels"
          :key="value.id"
          :text="value.name"
          @click="addChannel(value)"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { setChannel } from '@/utils/storage.js'
import { addChannelAPI, deleteChannelAPI } from '@/api/index.js'
export default {
  props: {
    // 代表接收一个参数，参数名叫 ownChannels
    editChannel: {
      // 代表：这个参数必填，不填就报错
      required: true,
      // type 用于限制传递的数据类型
      type: Array
    },
    channelAll: {
      required: true,
      type: Array
    },
    value: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      iconShow: false
    }
  },
  methods: {
    async editChannels (index, item) {
      this.editChannel.splice(index, 1)
      if (index < this.value) {
        this.$emit('input', this.value - 1)
      }
      // 判断用户是否有登陆
      if (this.$store.state.tokenObj.token) {
        // 代码进到这里代表登陆了
        await deleteChannelAPI(item.id)
      } else {
        // 代码进到这里说明没登录
        // 保存我的频道
        setChannel(this.editChannel)
      }
    },
    intoChannel (index) {
      // 把被点击的下标传递给父组件
      this.$emit('input', index)
      // 通知父组件关闭频道管理栏窗口
      this.$emit('close')
    },
    // 点击可选频道里的频道，将其添加到我的频道里
    async addChannel (item) {
      // 把被点击的频道加到我的频道里
      this.editChannel.push(item)
      // 判断用户是否有登陆
      if (this.$store.state.tokenObj.token) {
        // 代码进到这里代表登陆了
        await addChannelAPI({
          channels: [
            {
              id: item.id,
              seq: this.editChannel.length + 1
            }
          ]
        })
      } else {
        // 代码进到这里说明没登录
        // 保存我的频道
        setChannel(this.editChannel)
      }
    }
  },
  computed: {
    // 利用计算属性过滤掉以获取到的频道，得出可选频道
    selectChannels () {
      // return this.channelAll.filter(value => {
      //   // 复杂类型的数组建议用findIndex
      //   let idx = this.editChannel.findIndex(v => {
      //     if (v.id == value.id) {
      //       return true
      //     } else {
      //       return false
      //     }
      //   })
      //   // 只有不在我的频道数组里的才过滤出来
      //   // 也就意味着，下标要为-1才过滤出来
      //   return idx == -1
      // })

      return this.channelAll.filter(
        value => this.editChannel.findIndex(v => v.id == value.id) == -1
      )
    }
  }
}
</script>

<style scoped lang="less">
#app {
  padding: 0 18px 12px;
  .distribution {
    display: flex;
    align-items: center;
    height: 50px;
    span {
      flex: 1;
    }
    .van-button {
      line-height: 28;
    }
  }
  ::v-deep .van-grid-item__content {
    padding: 8px 4px;
    white-space: nowrap;
  }
  .col {
    color: red;
  }
  .delIcon {
    position: absolute;
    top: 0;
    right: 0;
    transform: scale(0.8);
  }
}
</style>
